<template>
  <div class="SysAdmin">
    <div class="head">
      <el-input
        v-model="keyword"
        placeholder="通关用户名搜索用户"
        suffix-icon="el-icon-search"
        @keydown.enter.native="searchAdminByKeyword"
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="margin-left:10px"
        @click="searchAdminByKeyword"
      >搜索</el-button>
    </div>

    <div class="main">
      <el-card
        class="el-card"
        v-for="(admin,index) in admins"
        :key="index"
      >
        <div slot="header"><span>{{admin.name}}</span>
          <el-button
            style="float: right; padding: 3px 0 ;color: red"
            type="text"
            icon="el-icon-delete"
            @click="deleteAdmin(admin)"
          ></el-button>
        </div>

        <div class="card-content">
          <div class="img">
            <img
              :src="admin.userFace"
              style="width:70px;border-radius:50%;"
            />
          </div>
          <div class="table">
            <table style="border-collapse:separate; border-spacing:15px 10px;">
              <tr>
                <td class="lebal">用户名：</td>
                <td>{{admin.name}}</td>
              </tr>

              <tr>
                <td class="lebal">手机号码：</td>
                <td>{{admin.phone}}</td>
              </tr>

              <tr>
                <td class="lebal">电话号码：</td>
                <td>{{admin.telephone}}</td>
              </tr>

              <tr>
                <td class="lebal">地址：</td>
                <td>{{admin.address}}</td>
              </tr>

              <tr>
                <td class="lebal">用户状态：</td>
                <td>
                  <el-switch
                    v-model="admin.enabled"
                    active-text="启用"
                    inactive-text="禁用"
                    active-color="#13ce66"
                    @change="updateAdminStatus(admin)"
                  ></el-switch>
                </td>
              </tr>

              <tr>
                <td class="lebal">用户角色：</td>
                <td>
                  <el-tag
                    type="success"
                    v-for="(adminRole,adminRoleIndex) in admin.roles"
                    :key="adminRoleIndex"
                    style="margin:10px 10px 0 0"
                  >{{adminRole.nameZh}}</el-tag>
                  <el-popover
                    ref="popover"
                    placement="right"
                    width="300"
                    trigger="click"
                    @show="showPopover(admin)"
                  >
                    <div class="popover-content">
                      <div class="popover-content-select">
                        <el-select
                          v-model="checkedRoleIds"
                          multiple
                          placeholder="请选择角色"
                        >
                          <el-option
                            v-for="(role) in roles"
                            :key="role.id"
                            :label="role.nameZh"
                            :value="role.id"
                          >
                          </el-option>
                        </el-select>
                      </div>

                      <div class="popover-content-button">
                        <el-button
                          type="text"
                          style="margin:0 0 10px 10px ;color:blue;font-size: 15px"
                          @click="updateAdminRole(admin,index)"
                        >提交</el-button>
                        <el-button
                          type="text"
                          style="margin:0 0 10px 10px;color:gray;font-size: 15px"
                          @click="closePopover(index)"
                        >取消</el-button>
                      </div>

                    </div>

                    <el-button
                      slot="reference"
                      type="text"
                      icon="el-icon-more"
                    ></el-button>
                  </el-popover>
                </td>
              </tr>

              <tr>
                <td class="lebal">备注：</td>
                <td>{{admin.remark}}</td>
              </tr>
            </table>
          </div>

        </div>

      </el-card>
    </div>

  </div>
</template>


<script>
import _ from 'lodash'
export default {

  name: 'SysAdmin',

  data() {
    return {
      admins: [],
      checkedRoleIds: [],
      roles: [],
      keyword: ''
    }

  },

  methods: {
    //获取所有其他操作员
    initAdmins() {
      window.sessionStorage.getItem('admin');
      this.getRequest(`/system/admin/?keyword=${this.keyword}`).then(resp => {
        if (resp) {
          this.admins = resp
        }
      })
    },
    //获取所有角色
    initRoles() {
      this.getRequest(`system/basic/role/`).then(resp => {
        if (resp) {
          this.roles = resp
        }
      })
    },

    //显示popover时触发方法
    showPopover(admin) {
      this.checkedRoleIds = []
      admin.roles.forEach(role => {
        this.checkedRoleIds.push(role.id)
      });
      this.initRoles()
    },

    //更新操作员角色
    updateAdminRole(admin, index) {
      let adminRoleIds = []
      adminRoleIds = admin.roles.map(role => role.id);
      if (_.isEqual(adminRoleIds, this.checkedRoleIds)) {
        this.$message.info('未作修改，无需更新')
        return;
      }
      this.putRequest(`/system/admin/role/?adminId=${admin.id}`, this.checkedRoleIds).then(resp => {
        if (resp) {
          this.initAdmins()
          //关闭popover
          this.$refs.popover[index].doClose()
        }
      })
    },

    //关闭popover
    closePopover(index) {
      this.$refs.popover[index].doClose()
    },
    //更改操作员status
    updateAdminStatus(admin) {
      this.putRequest(`/system/admin/`, admin).then(resp => {
        if (resp) {
          this.initAdmins()
        }
      })
    },

    //通过关键字搜索操作员
    searchAdminByKeyword() {
      this.initAdmins()
    },
    //删除操作员
    deleteAdmin(admin) {
      this.$confirm(`该操作将永久删除[${admin.name}]操作员,是否确认？`, '提示', { type: 'warning' }).then(() => {
        this.deleteRequest(`/system/admin/${admin.id}`).then(resp => {
          if (resp) {
            this.initAdmins()
          }
        })
      }).catch(() => {
        this.$message.info('已取消')
      })

    }
  },
  mounted() {
    this.initAdmins()
  },
}
</script>


<style lang="css" scoped>
.head {
  display: flex;
  width: 30%;
  margin: 15px auto;
}
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.el-card {
  width: 30%;
  margin: 20px 20px 20px 20px;
}
.img {
  display: flex;
  justify-content: center;
}
.table {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  font-family: 华文楷体;
  font-size: 15px;
  color: rgba(0, 130, 243, 0.735);
}
.lebal {
  width: 80px;
}
.popover-content {
  display: flex;
}
.popover-content-button {
  display: flex;
  justify-content: space-around;
}
</style>